<template>
  <div class="kw-form-item" :class="config.cls">
    <div class="kw-form-item-label">
      <span style="color:#ff5400;">{{config.name}}</span>
      <span class="desc">{{config.desc}}</span>
    </div>
    <div class="kw-form-item-content">
      <kw-button type="blue" size="large" @on-click="showdialog=true">
          <i class="iconfont icon-select-pointer"></i>
      </kw-button>
    </div>
    <kw-dialog v-model="showdialog" title="权限设置" ok="保存并关闭" width="800px" height="300px"
              @on-close="showdialog=false" @on-ok="handlerOnOk">
      <kw-table :columns="columns" :data="dataList" border></kw-table>
      <kw-button type="green" slot="mid-footer">添加</kw-button>
      <kw-button type="error" slot="mid-footer">删除</kw-button>
      <kw-button type="blue" slot="mid-footer">保存</kw-button>
    </kw-dialog>
  </div>
</template>

<script>
  import { prop } from '../../mixins/prop'
  export default {
    name: 'privige-prop',
    mixins: [prop],
    data() {
      return {
        showdialog: false,
        columns: [
          {title: '控件名', key: 'ctrlAlias', width: '24%'},
          {title: '角色名', key: 'roleId', width: '24%', optionsKey: 'roles', placeholder: '（与角色无关）', render: this.selectColumnRender},
          {title: '状态名', key: 'stateId', width: '24%', optionsKey: 'states', placeholder: '（与状态无关）', render: this.selectColumnRender},
          {title: '权限类型', key: 'priType', width: '14%', optionsKey: 'priTypes', render: this.selectColumnRender},
          {title: '权重', key: 'priWeight', width: '24%', render: (h, param) => {
            return h('input', {
              domProps: {
                value: param.row[param.column.key] || 1
              },
              attrs: {
                type: 'number'
              },
              on: {
                input: (event) => {
                  param.row[param.column.key] = event.target.value
                }
              }
            })
          }}
        ],
        dataList: [],
        roles: [],
        states: [],
        priTypes: []
      }
    },
    created() {
      this.$get('mock/compPrivige.json').then(resp => {
        if (resp) {
          this.dataList = resp.dataList || [],
          this.roles = resp.roles || [],
          this.states = resp.states || [],
          this.priTypes = resp.priTypes || []
        }
      })
    },
    methods: {
      handlerOnOk() {
        console.log(this.dataList)
        this.showdialog = false
      },
      selectColumnRender(h, param) {
        let column = param.column
        let arr = []
        if (column.placeholder) {
          arr.push({value: '', label: column.placeholder})
        }
        let list = this[column.optionsKey] || []
        list.map(o => {
          arr.push({value: o.id, label: o.name})
        })
        return h('kw-select', {
          props: {
            placeholder: column.placeholder,
            value: param.row[column.key],
            options: arr
          },
          on: {
            'on-change'(val) {
              param.row[column.key] = val
            }
          }
        })
      }
    }
}
</script>

<style>

</style>